<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 -->
    <script src="./js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 1.jQuery是js的数据库
    //jQuery的简写$
    //获取
    console.log(document.getElementById("box"));
    //获取的jQuery对象
    console.log($("#box"));
//入口函数区别
    //1.js的入口函数只能有一个.jQuery的入口函数可以有多个
    //2.js的加载完成（css，图片，链接）就会执行，jQuery只需要body内的内容加载完成就会执行
    //3.jQuery的入口函数可以简写
    //入口函数
    window.onload = function () {
        console.log("页面加载完毕");
    }
    window.onload = function () {
        console.log("页面加载完毕2");
    }
    window.onload = function () {
        console.log("页面加载完毕3");
    }
    window.onload = function () {
        console.log("页面加载完毕4");
    }
    //jQuery入口函数
    $(document).ready(function () {
        console.log("ready1");
    })
    $(document).ready(function () {
        console.log("ready2");
        
    })   
    $(document).ready(function () {
        console.log("ready3");
        
    })    
    $(document).ready(function () {
        console.log("ready4");
        
    })
    //简写
    $(function () {
        console.log("简写ready");  
    })
</script>
</html>